<template>
  <div class="login_l">
    <div class="pub_nav not_nav">
      <span class="el-icon-s-custom"></span>&nbsp;
      <span class="user_">用户登录</span>
    </div>
    <div class="login_err" v-show="this.err_msg.isShowMsg">
      <span class="el-icon-warning-outline"></span>
      <span>{{this.err_msg.msg}}</span>
    </div>
    <form>
      <div>
        <label for="userName">账&nbsp;&nbsp;号</label>
        <input type="text" name="userName" placeholder="请输入用户名" v-model="userName" @blur="yzxh">
      </div>

      <div>
        <label for="password">密&nbsp;&nbsp;码</label>
        <input type="password" name="password" placeholder="请输入密码"  v-model="passWord" @blur="yzmm">
      </div>
      <div tag="div" class="wjmm" to="/apply" @click="alert_err">忘记密码</div>
      <button name="login" type="submit" @click.prevent="login">登陆</button>
       <!-- @click.prevent="login"  -->
    </form>
    <!-- 第三方登陆接口 -->
    <!-- <div class="D3">
      d3方登陆
    </div> -->
  </div>
</template>

<script>

export default {
  data(){
    return{
      // 提示信息
      err_msg:{
        msg:'undefind',
        isShowMsg: false
      },
        userName:'',
        passWord:'',
        alertmsg:{
          title:"",
          type:''
        }
    }
  },
  methods:{
    alert_err(){
      this.$message.warning('请联系管理员！')
    },
    yzxh(){
    // 验证规则

    },
    yzmm(){
      
    },
    login(){
      var qs=require('qs');
      var instance_all = this.$http.create({ headers: {'content-type': 'application/x-www-form-urlencoded'} });
      // console.log(qs.stringify({name: this.userName,password: this.passWord}))
      if(this.passWord == '' || this.userName == ''){
        this.err_msg.isShowMsg = true
        this.err_msg.msg = '用户名或密码不能为空'
      }else{
        this.err_msg.isShowMsg = false
        instance_all.post('http://blog.com/home/api/login',
          qs.stringify({
            name: this.userName,
            password: this.passWord
          })).then((result) => {
          let yz = result.data.status
          if(yz == 401){
            this.err_msg.isShowMsg = true
            this.err_msg.msg = '用户名或密码不正确!'
          }else if(yz == 200){
          const user = result.data.data[0];
          //将用户信息存入localStorag中的user
          /**
           * user_blog = {
           *  user: {
           *    username: '201642304813'  
           *    id: 3
           *  },
           * token:"safgstyqb...."
           * }
           * 
           */
          // localStorage.setItem('user', JSON.stringify(user));
          // 
          // 自定义监听器
          user.password = ''
        this.$addStorageEvent(1, "user_blog", JSON.stringify(user));
          // localStorage.setItem('user_token', JSON.stringify(user.token));
          this.$router.push({ path: '/', })
        }else{
          this.err_msg.isShowMsg = true
            this.err_msg.msg = '用户名或密码不正确!'
        }

      }).catch(() => {
          this.err_msg.isShowMsg = true
          this.err_msg.msg = "程序错误，请刷新重试！"
      })
      }
    }
  }
}
</script>

<style scoped>

.login_l{
  position: absolute;
  left: 55%;
  top:50%;
  width: 380px;
  height: 340px;
  background-color: #dddddd;
  border-radius: 8px;
  /* border: 1px solid #424242; */
  transform: translate(0,-50%);
}
.pub_nav{
    /* margin: 10px 0; */
    text-align: left;
    margin-top: 8px;
    font-size: 18px;
    padding: 6px 2px;
    border-bottom: 2px solid #cdcdcf;
}
.pub_nav > span{
    font-size: 22px;
    color: #303f70;
}
.user_{
  font-size: 17px;
}
.not_nav > span{
  padding-left: 12px;
}

.login_l > form{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90%;
  height: 180px;
  transform: translate(-50%,-43%);
  /* border: 1px solid #424242; */
}
.login_l > form > div{
  /* width: 80%; */
  /* border: 1px solid #424242; */
  /* padding: 8px 0; */
  margin-bottom: 20px;
}
.login_l > form .wjmm{
  text-align: right;
  margin-right: 8%;
  font-size: 12px;
  cursor: pointer;
}
.login_l > form > div>label{
  display: inline-block;
  /* border: 1px solid #424242; */
  width: 12%;
  font-size: 16px;
  padding: 2px 0;
  text-align: center;
}
.login_l > form > div> input{
  display: inline-block;
  border: 0;
  padding: 4px 0;
  outline:none;
  width: 80%;
  margin-left: 2%;
  border-radius: 2px;
  padding-left: 6px;
}
.login_l > form > button{
  padding: 8px 0;
  width: 93%;
  border: 0;
  background-color: #5356eb;
  font-size: 17px;
  color: #fff;
  letter-spacing: 18px;
  border-radius: 6px;
  text-align: center;
  cursor: pointer;
  outline:none;
}
.login_err{
  width: 90%;
  margin: 0 auto;
  /* border: 1px solid #e9cbcb; */
  padding: 2px;
}
.login_err > span{
  display: inline-block;
  color: #bb0e0e;
  font-size: 12px;
  margin-left: 8px;
}

.login_l > .D3{
  position: absolute;
  bottom: 20px;
  border: 1px solid #e9cbcb;
  height: 10px;
}

</style>